<template>
  <view class="ai-divider" :class="[size, textClass]">
    <slot></slot>
  </view>
</template>

<script>
  /**
   * 分割线
   * @description 通用分割线
   * @property {String} position = [center|left|right] 展示的类型
   * 	@value center 中间
   * 	@value left 左边
   * 	@value right 右边
   * @property {String} size = [xs|sm|md|lg] 展示的类型
   *  @value xs 极小
   * 	@value sm 小
   * 	@value md 中
   * 	@value lg 大
   */
  export default {
    name: "ai-divider",
    props: {
      position: {
        type: String,
        default: 'center'
      },
      size: String,
      empty: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {

      };
    },
    computed: {
      textClass() {
        return !this.empty && 'ai-divider--text-' + this.position
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-divider {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 12px 0;
    font-size: $font-size-md;
    color: var(--gray-3);
    
    &.xs {
      font-size: $font-size-xs;
    }
    &.sm {
      font-size: $font-size-sm;
    }
    &.lg {
      font-size: $font-size-lg;
    }
    

    &:before,
    &:after {
      content: '';
      display: block;
      flex: 1;
      border-top: 1px solid var(--gray-5);
    }
  }

  .ai-divider--text-center,
  .ai-divider--text-left,
  .ai-divider--text-right {
    &:before {
      margin-right: var(--gutter);
    }

    &:after {
      margin-left: var(--gutter);
    }
  }

  .ai-divider--text-left {
    &:before {
      max-width: 10%;
    }
  }

  .ai-divider--text-right {
    &:after {
      max-width: 10%;
    }
  }
</style>